<template>
  <div id="app">
    <el-container style="height: 100vh">
      <!-- 左侧菜单 -->
      <el-aside
        v-if="showSidebar"
        :width="sidebarWidth"
        class="sidebar-container"
      >
        <div class="sidebar-header">
          <!-- <h2>VForm2</h2> -->
          <!-- <p>表单设计器</p> -->
          <h2>表单设计器</h2>
        </div>
        <el-menu
          :default-active="activeMenu"
          @select="handleMenuSelect"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409eff"
          :collapse="isCollapse"
          unique-opened
        >
          <el-menu-item index="/">
            <i class="el-icon-house"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-menu-item index="/templates">
            <i class="el-icon-folder"></i>
            <span slot="title">模板管理</span>
          </el-menu-item>

          <el-menu-item index="/pages">
            <i class="el-icon-document"></i>
            <span slot="title">页面管理</span>
          </el-menu-item>

          <el-menu-item index="/designer">
            <i class="el-icon-edit"></i>
            <span slot="title">表单设计器</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-container>
        <!-- 顶部工具栏 -->
        <el-header v-if="showHeader" class="main-header">
          <div class="header-left">
            <el-button
              type="text"
              @click="toggleSidebar"
              class="sidebar-toggle"
            >
              <i
                :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
              ></i>
            </el-button>
            <span class="page-title">{{ pageTitle }}</span>
          </div>

          <div class="header-right">
            <el-dropdown @command="handleUserCommand" trigger="click">
              <span class="user-info">
                <i class="el-icon-user"></i>
                {{ currentUser }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="setUser"
                  >设置用户名</el-dropdown-item
                >
                <el-dropdown-item command="logout" divided
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>

            <!-- <el-button type="text" @click="goHome" class="home-btn">
              <i class="el-icon-house"></i>
              首页
            </el-button> -->
          </div>
        </el-header>

        <!-- 页面内容 -->
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isCollapse: false,
      currentUser: "系统用户",
    };
  },
  computed: {
    // 是否显示侧边栏
    showSidebar() {
      const routeName = this.$route.name;
      return (
        routeName !== "FormPreview" &&
        routeName !== "GeneratedPage" &&
        routeName !== "PurePageView"
      );
    },
    // 是否显示头部
    showHeader() {
      const routeName = this.$route.name;
      return (
        routeName !== "FormPreview" &&
        routeName !== "GeneratedPage" &&
        routeName !== "PurePageView"
      );
    },
    // 侧边栏宽度
    sidebarWidth() {
      return this.isCollapse ? "64px" : "200px";
    },
    // 当前激活的菜单
    activeMenu() {
      return this.$route.path;
    },
    // 页面标题
    pageTitle() {
      const routeName = this.$route.name;
      const titleMap = {
        Home: "首页",
        FormDesigner: "表单设计器",
        FormRender: "表单渲染",
        FormPreview: "表单预览",
        TemplateManager: "模板管理",
        PageManager: "页面管理",
        GeneratedPage: "生成页面",
        DynamicPageView: "动态页面",
        PurePageView: "纯页面",
      };
      return titleMap[routeName] || "VForm2 表单设计器";
    },
  },
  created() {
    // 初始化用户信息
    this.loadUserInfo();
  },
  methods: {
    // 菜单选择处理
    handleMenuSelect(index) {
      this.$router.push(index);
    },
    // 返回首页
    goHome() {
      this.$router.push("/");
    },
    // 切换侧边栏
    toggleSidebar() {
      this.isCollapse = !this.isCollapse;
    },

    // 加载用户信息
    loadUserInfo() {
      const userInfo = localStorage.getItem("current-user");
      if (userInfo) {
        try {
          const user = JSON.parse(userInfo);
          this.currentUser = user.name || user.username || "系统用户";
        } catch (error) {
          console.error("解析用户信息失败:", error);
          this.currentUser = "系统用户";
        }
      }
    },

    // 处理用户菜单命令
    handleUserCommand(command) {
      switch (command) {
        case "setUser":
          this.setUserName();
          break;
        case "logout":
          this.logout();
          break;
      }
    },

    // 设置用户名
    async setUserName() {
      try {
        const { value: userName } = await this.$prompt(
          "请输入您的用户名",
          "设置用户名",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /\S+/,
            inputErrorMessage: "用户名不能为空",
            inputValue: this.currentUser === "系统用户" ? "" : this.currentUser,
          }
        );

        if (userName) {
          const userInfo = {
            name: userName,
            username: userName,
            loginTime: new Date().toISOString(),
          };

          // 保存用户信息到localStorage
          localStorage.setItem("current-user", JSON.stringify(userInfo));

          // 更新当前用户显示
          this.currentUser = userName;

          this.$message.success(`用户名已设置为: ${userName}`);
        }
      } catch (error) {
        // 用户取消输入
        console.log("用户取消设置用户名");
      }
    },

    // 退出登录
    logout() {
      this.$confirm("确定要退出登录吗？", "退出确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 清除用户信息
          localStorage.removeItem("current-user");
          this.currentUser = "系统用户";
          this.$message.success("已退出登录");
        })
        .catch(() => {
          // 用户取消退出
        });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 侧边栏样式 */
.sidebar-container {
  background: #304156;
  transition: width 0.28s;
  position: relative;
  z-index: 1000;
}

.sidebar-header {
  padding: 20px;
  text-align: center;
  background: #2b2f3a;
  border-bottom: 1px solid #434a50;
}

.sidebar-header h2 {
  color: #409eff;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 5px 0;
}

.sidebar-header p {
  color: #bfcbd9;
  font-size: 12px;
  margin: 0;
}

/* 侧边栏菜单样式 */
.sidebar-container .el-menu {
  border-right: none;
  height: calc(100vh - 80px);
  overflow-y: auto;
}

.sidebar-container .el-menu-item {
  color: #bfcbd9;
}

.sidebar-container .el-menu-item:hover {
  background-color: #263445 !important;
  color: #409eff !important;
}

.sidebar-container .el-menu-item.is-active {
  background-color: #409eff !important;
  color: white !important;
}

.sidebar-container .el-submenu__title {
  color: #bfcbd9;
}

.sidebar-container .el-submenu__title:hover {
  background-color: #263445 !important;
  color: #409eff !important;
}

/* 主头部样式 */
.main-header {
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-left {
  display: flex;
  align-items: center;
}

.sidebar-toggle {
  font-size: 18px;
  color: #606266;
  margin-right: 15px;
}

.sidebar-toggle:hover {
  color: #409eff;
}

.page-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
}

.home-btn {
  color: #606266;
  font-size: 14px;
}

.home-btn:hover {
  color: #409eff;
}

.user-info {
  color: #606266;
  cursor: pointer;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

.user-info:hover {
  color: #409eff;
}

.user-info i {
  margin-right: 5px;
}

/* 主内容区域 */
.main-content {
  background: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar-container {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1001;
  }

  .main-header {
    padding: 0 15px;
  }

  .page-title {
    font-size: 16px;
  }

  .main-content {
    padding: 15px;
  }
}

/* 菜单折叠时的样式调整 */
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-submenu__title span {
  display: none;
}

.el-menu--collapse .el-menu-item i,
.el-menu--collapse .el-submenu__title i {
  margin-right: 0;
}
</style>
